<template>
  <el-main>
    <div ref="mapDiv" class="map-container"></div>
    <div class="layer-control-panel">
      <el-card class="layer-card">
        <template #header>
          <div class="card-header">
            <span>图层控制</span>
          </div>
        </template>
        <el-checkbox v-model="layerVisibility.landParcel">土地地块图层</el-checkbox>
      </el-card>
    </div>

    <!-- 地块属性面板 -->
    <div v-if="queryState.showAttributePanel" class="attribute-panel">
      <el-card class="attribute-card">
        <template #header>
          <div class="card-header">
            <div class="header-title-container">
              <el-icon class="header-icon"><Location /></el-icon>
              <span>地块属性详情</span>
            </div>
            <el-button type="text" @click="closeAttributePanel" class="close-button">
              <el-icon><Close /></el-icon>
            </el-button>
          </div>
        </template>
        <div class="attribute-content">
          <div class="attribute-section">
            <div class="section-title">基本信息</div>
            <el-form label-width="100px" size="small" class="attribute-form">
              <el-form-item label="地块编号" class="highlight-item">
                <span class="attribute-value id-value">{{ landParcelForm.LandID }}</span>
              </el-form-item>
              <el-form-item label="地块类型">
                <span class="attribute-value">{{ landParcelForm.landType }}</span>
              </el-form-item>
              <el-form-item label="面积(㎡)">
                <span class="attribute-value">{{ landParcelForm.Area.toFixed(2) }}</span>
              </el-form-item>
              <el-form-item label="土地用途">
                <span class="attribute-value">{{ landParcelForm.landUse }}</span>
              </el-form-item>
            </el-form>
          </div>

          <div class="attribute-section">
            <div class="section-title">权属信息</div>
            <el-form label-width="100px" size="small" class="attribute-form">
              <el-form-item label="权属类型">
                <span class="attribute-value">{{ landParcelForm.ownershipType }}</span>
              </el-form-item>
              <el-form-item label="权利人">
                <span class="attribute-value">{{ landParcelForm.rightHolder }}</span>
              </el-form-item>
            </el-form>
          </div>

          <div class="attribute-section">
            <div class="section-title">时间信息</div>
            <el-form label-width="100px" size="small" class="attribute-form">
              <el-form-item label="到期日期">
                <span class="attribute-value date-value">{{ landParcelForm.expirationDate }}</span>
              </el-form-item>
              <el-form-item label="取得日期">
                <span class="attribute-value date-value">{{ landParcelForm.acquisitionDate }}</span>
              </el-form-item>
              <el-form-item label="更新日期">
                <span class="attribute-value date-value">{{ landParcelForm.updateDate }}</span>
              </el-form-item>
            </el-form>
          </div>

          <div class="attribute-section">
            <div class="section-title">其他信息</div>
            <el-form label-width="100px" size="small" class="attribute-form">
              <el-form-item label="地块状态">
                <el-tag size="small" :type="landParcelForm.parcelStatus === '正常' ? 'success' : 'warning'">
                  {{ landParcelForm.parcelStatus }}
                </el-tag>
              </el-form-item>
              <el-form-item label="地块等级">
                <el-rate
                  v-model="landParcelGradeValue"
                  disabled
                  text-color="#ff9900"
                  score-template="{value}">
                </el-rate>
              </el-form-item>
              <el-form-item label="备注">
                <span class="attribute-value remarks">{{ landParcelForm.remarks || '暂无备注' }}</span>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-card>
    </div>
  </el-main>
</template>

<script setup lang="ts">
import { onMounted, computed } from 'vue'
import { useMapView } from '@/utils/MapView'
import { useMapBrowseQuery } from '@/utils/MapviewBrowse'
import { Close, Location } from '@element-plus/icons-vue'
import '@/assets/styles/map-view.css'

// 从MapView中获取地图相关引用
const { mapDiv, layerVisibility, initMap } = useMapView()

// 从MapviewBrowse中获取地图查询功能
const {
  initMapQuery,
  closeAttributePanel,
  landParcelForm,
  queryState,
  landTypeOptions
} = useMapBrowseQuery(null, null)

// 计算地块等级值，用于评分组件
const landParcelGradeValue = computed(() => {
  // 将中文等级转换为数字
  const gradeMap: Record<string, number> = {
    '一级': 1,
    '二级': 2,
    '三级': 3,
    '四级': 4,
    '五级': 5
  }

  return landParcelForm.parcelGrade ? (gradeMap[landParcelForm.parcelGrade] || 0) : 0
})

onMounted(() => {
  // 初始化地图
  const mapInstance = initMap()

  // 初始化地图查询功能
  if (mapInstance) {
    initMapQuery(mapInstance)
  }
})
</script>

<style lang="scss" scoped>
.layer-control-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
}

.layer-card {
  width: 250px;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  color: var(--land-primary);
}

.header-title-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-icon {
  color: var(--land-primary);
  font-size: 18px;
}

.close-button {
  padding: 4px;
  transition: all 0.2s ease;
  &:hover {
    background-color: rgba(244, 67, 54, 0.1);
    color: var(--land-danger);
    transform: rotate(90deg);
  }
}

.el-checkbox {
  display: block;
  margin-bottom: 10px;
}

/* 属性面板样式 */
.attribute-panel {
  position: absolute;
  bottom: 20px;
  left: 20px;  /* 从 right: 20px 改为 left: 20px */
  z-index: 10;
  max-width: 420px;
  max-height: 70vh;
  overflow-y: auto;
  transition: all 0.3s ease;
}

.attribute-card {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(5px);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.attribute-content {
  padding: 0 10px 15px;
}

.attribute-section {
  margin-bottom: 15px;
  border-bottom: 1px dashed var(--land-border);
  padding-bottom: 10px;

  &:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

.section-title {
  font-size: 14px;
  font-weight: bold;
  color: var(--land-primary);
  margin: 10px 0;
  padding-left: 10px;
  border-left: 3px solid var(--land-primary);
  display: flex;
  align-items: center;
}

.attribute-form {
  padding: 0 5px;
}

.attribute-value {
  font-size: 14px;
  color: var(--land-text);
  font-weight: 500;
  padding: 2px 5px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;

  &.id-value {
    color: var(--land-primary-dark);
    font-weight: bold;
    letter-spacing: 1px;
    background-color: rgba(44, 142, 105, 0.1);
  }

  &.date-value {
    font-family: monospace;
    letter-spacing: 0.5px;
  }

  &.remarks {
    display: block;
    padding: 8px;
    margin-top: 4px;
    min-height: 20px;
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 4px;
    font-style: italic;
    color: var(--land-text-light);
  }
}

.highlight-item {
  background-color: rgba(44, 142, 105, 0.05);
  border-radius: 6px;
  padding: 2px 5px;
}

.el-form-item {
  margin-bottom: 12px;
  transition: all 0.2s ease;

  &:hover {
    transform: translateX(3px);
  }
}
</style>